<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags" prefix="s"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ page session="false"%>
<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>产品</title>
<META http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<link href="<c:url value="/resources/css/normalize.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/css/lib.css" />" rel="stylesheet" type="text/css" />
<link href="<c:url value="/resources/css/style.css" />" rel="stylesheet" type="text/css" />

<script src="<c:url value="/resources/jquery/1.6/jquery.js" />"></script>
<script src="<c:url value="/resources/jquery/plugin/cookie/jquery.cookie.js" />"></script>

<script src="<c:url value="/resources/scripts/regionUtil.js" />"></script> 
<script src="<c:url value="/resources/scripts/categoryUtil.js" />"></script>
<script src="<c:url value="/resources/scripts/pager.js" />"></script>
<style>

</style>

<script>
    function deSelectRegion(id) {
        if (typeof (id) == 'object') {
            id = $(id).attr('regionId');
        }
        var pid = id.substring(0, id.length - 3);
        selectRegion(pid);
    }

    function deSelectCategory(id) {
        if (typeof (id) == 'object') {
            id = $(id).attr('categoryId');
        }
        var pid = id.substring(0, id.length - 3);
        selectCategory(pid);
    }

    function selectRegion(id){
        if (typeof (id) == 'object') {
            id = $(id).attr('regionId');
        }
        $('#regionId').val(id);
        document.getElementById('searchCriteriaForm').submit();
    }

    function selectCategory(id){
        if (typeof (id) == 'object') {
            id = $(id).attr('categoryId');
        }
        $('#categoryId').val(id);
        document.getElementById('searchCriteriaForm').submit();
    }
    function restoreSelectedRegion(id) {
        if (typeof (id) == 'object') {
            id = $(id).attr('regionId');
        }
        var i = 0, j = 0;
        var selectParentRegionid, selectedParentRegion;
        $('#regionId').val(id);
        $('#selectedRegion').html('');
        if (id == '100') {

        } else {
            while ((6 + i * 3) <= id.length) {
                selectParentRegionid = id.substring(0, 6 + i * 3);
                selectedParentRegion = RegionUtil.getItem(selectParentRegionid);
                $('#selectedRegion')
                        .append(
                                '<span class="selectedCriteria" regionId="'
                                        + selectParentRegionid
                                        + '">'
                                        + selectedParentRegion
                                        + '<a class="selectedCriteriaDeleteIcon" regionId="'
                                        + selectParentRegionid
                                        + '" href="javascript: void(0);" onclick="deSelectRegion(this);"></a></span>');
                i++;
            }
        }
        $('#tdSubRegions').html('');
        var subRegions = RegionUtil.getSub(id);
        for ( var rid in subRegions) {
            var rname = RegionUtil.getItem(rid);
            $('#tdSubRegions')
                    .append(
                            '<a class="optionItem" href="javascript: void(0);" onclick="selectRegion(this);" regionId="'
                                    + rid + '">' + rname + '</a>');
        }
    }

    function restoreSelectedCategory(id) {
        if (typeof (id) == 'object') {
            id = $(id).attr('categoryId');
        }
        var i = 0, j = 0;
        var selectParentCategoryId, selectedParentCategory;
        $('#categoryId').val(id);
        $('#selectedCategory').html('');
        if (id == '100') {

        } else {
            while ((6 + i * 3) <= id.length) {
                selectParentCategoryId = id.substring(0, 6 + i * 3);
                selectedParentCategory = CategoryUtil
                        .getItem(selectParentCategoryId).name;
                $('#selectedCategory')
                        .append(
                                '<span class="selectedCriteria" categoryId="'
                                        + selectParentCategoryId
                                        + '">'
                                        + selectedParentCategory
                                        + '<a class="selectedCriteriaDeleteIcon" categoryId="'
                                        + selectParentCategoryId
                                        + '"href="javascript: void(0);" onclick="deSelectCategory(this);"></a></span>');
                i++;
            }
        }
        $('#tdSubCategories').html('');
        var subCategories = CategoryUtil.getSub(id);
        for ( var rid in subCategories) {
            var rname = CategoryUtil.getItem(rid).name;
            $('#tdSubCategories')
                    .append(
                            '<a class="optionItem" href="javascript: void(0);" onclick="selectCategory(this);" categoryId="'
                                    + rid + '">' + rname + '</a>');
        }
    }

    
    $(document).ready(function() {
        var selectedRegionId = '${searchCriteria.regionId}';
        if (selectedRegionId == '') {
            restoreSelectedRegion('100');
        } else {
            restoreSelectedRegion(selectedRegionId);
        }

        var selectedCategoryId = '${searchCriteria.categoryId}';
        if (selectedCategoryId == '') {
            restoreSelectedCategory('100');
        } else {
            restoreSelectedCategory(selectedCategoryId);
        }
        var pager = new Pager(${page}, 10, 3, ${total}, '#pager', '<c:url value="/search?keyword=" />${searchCriteria.keyword}&categoryId=${searchCriteria.categoryId}&regionId=${searchCriteria.regionId}');
        pager.createPagerBar('#pager');
    });
</script>
</head>
<body>
<div id="bodyWrapper">
<div id="bodyWrapperHeader"></div>
<jsp:include page="/resources/static/menu.jsp"></jsp:include>
<div class="two-column-layout auto">
<div class="left">
<div class="inner">
<form id="searchCriteriaForm" action="<c:url value="/search" />" method="post">
<div id="searchCriteria" class="search-criteria-region lh24">
<div class=""><span class="b">区域：<input type="hidden" name="regionId"
    id="regionId" /></span> <span id="selectedRegion"></span></div>
<div><span id="tdSubRegions"></span></div>
<hr class="hr-seprator" />
<div><span class="b">类型：<input type="hidden" name="categoryId"
    id="categoryId" /></span> <span id="selectedCategory"></span></div>
<div><span id="tdSubCategories"></span></div>
</div>
<div class="mt10 mb10 f12">
    <span>关键字:</span>
    <input name="keyword" id="keyword" value="${searchCriteria.keyword}" />
    <input type="submit" value="搜索" />
</div>
<div class="f12 mt10 mb10">
    <c:if test="${total ne null}">
        <span class="">一共找到 ${total} 条记录</span>
    </c:if>
</div>
</form>
<table class="f12 search-result-list">
    <tbody>
        <c:if test="${not empty products}">
            <c:forEach var="p" items="${products}">
                <tr>
                    <td width="90px">
                        <div class="">
                            <a href="#">
                                <img class="product-img-80" src="<c:url value="/upload/images/" />${p.iconImage}" onerror='this.src="<c:url value="/resources/images/logo1.gif" />"'/>
                            </a>
                        </div>
                    </td>
                    <td>
                        <div class="f14 b pb10"><a href="<c:url value="/products/" />${p.categoryId}/${p.id}.html">${p.name}</a></div>
                        <div>会员名称: ${p.member.name}</div>
                        <div>发布日期: [${p.sDateCreated}]</div>
                    </td>
                    <td>${p.region.name}</td>
                    <td>${p.category.name}</td>
                    <td align="right">${p.price}/${p.unit}</td>
                </tr>
            </c:forEach>
        </c:if>
    </tbody>
</table>
<div id="pager" class="pager f12 mt10 mb10">
</div>
</div>
</div>
<div class="right">
    <div class="box1 bg1">
        <div class="title1 f12 b">媒体推荐</div>
        <div id="recomandProductList" class="tc">
        <c:if test="${not empty products}">
          <c:forEach var="p" items="${products}">
            <c:if test="${ p.promoteIndicator=='YES'}">
            <div class="pt10 line1">
                
                <div class=""><img class="img-dim1" src="<c:url value="/upload/images/${p.bigImage}" />"/></div>
                <div class="lh22 f13">
                    <span class="red">${p.price}/${p.unit}</span><br/>
                    <a href="<c:url value="/products/" />${p.categoryId}/${p.id}.html">${p.name}</a>
                </div>
            </div>
            </c:if>
          </c:forEach>
        </c:if>
        </div>
    </div>
</div>
</div>
<jsp:include page="/resources/static/footer.jsp"></jsp:include>
</div>
</body>
</html>
